<template>
  <div class="cart">
    <div class="container">
      <van-empty
        description="购物车目前还没有商品"
        v-show="productList.length === 0"
      >
        <router-link :to="{ name: 'category' }">
          <van-button>去购物</van-button>
        </router-link>
      </van-empty>

      <div v-for="item in productList" :key="item.id" class="list">
        <van-swipe-cell>
          <div class="checkbox">
            <van-checkbox v-model="item.check" />
          </div>
          <div class="image">
            <van-image width="80" height="80" :src="item.picture" />
          </div>
          <div class="info">
            <div class="name">{{ item.name }}</div>
            <div class="desc">{{ item.description }}</div>
            <div class="bottom">
              <div class="price">¥{{ item.price }}</div>
              <van-stepper
                v-model="item.stock"
                theme="round"
                button-size="22"
                disable-input
              />
            </div>
          </div>
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
              @click="onDelete(item.id)"
            />
          </template>
        </van-swipe-cell>
      </div>

      <!-- 结算栏，注意不是 fixed，不挡底部导航栏 -->
      <div class="cart-footer">
        <van-checkbox v-model="checkAll" @change="toggleAll">全选</van-checkbox>
        <div class="total-price">
          合计：<span>¥{{ totalPrice }}</span>
        </div>
        <van-button
          type="danger"
          class="checkout-button"
          :disabled="selectedCount === 0"
          @click="onCheckout"
        >
          结算({{ selectedCount }})
        </van-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { showToast } from 'vant'

const productList = ref([
  {
    id: 1,
    category_id: 1,
    description: '富含维生素C',
    name: '碳粉机单张',
    picture: '/images/碳粉机单张.jpg',
    price: 100,
    stock: 2,
    check: true,
  },
  {
    id: 2,
    category_id: 1,
    description: '膳食纤维丰富',
    name: '惠普油墨单张+',
    picture: '/images/惠普油墨单张+.jpg',
    price: 120,
    stock: 1,
    check: false,
  },
  {
    id: 3,
    category_id: 1,
    description: '营养全面',
    name: '碳粉机黑白',
    picture: '/images/碳粉机黑白.jpg',
    price: 80,
    stock: 1,
    check: false,
  },
])

const checkAll = computed({
  get: () => productList.value.length > 0 && productList.value.every((item) => item.check),
  set: (value) => {
    productList.value.forEach((item) => {
      item.check = value
    })
  },
})

const toggleAll = () => {
  checkAll.value = !checkAll.value
}

const totalPrice = computed(() =>
  productList.value.reduce((sum, item) => {
    return item.check ? sum + item.price * item.stock : sum
  }, 0)
)

const selectedCount = computed(() => {
  return productList.value.filter((item) => item.check).length
})

const onDelete = (id) => {
  const index = productList.value.findIndex((item) => item.id === id)
  if (index !== -1) productList.value.splice(index, 1)
}

const onCheckout = () => {
  if (selectedCount.value === 0) {
    showToast('请选择商品')
    return
  }
  showToast(`成功结算 ${selectedCount.value} 件商品！`)
}
</script>

<style lang="scss" scoped>
.cart {
  margin: 0;
  padding-bottom: 10px; /* 适配底部结算栏 */

  .container {
    padding: 0.3rem;

    .list {
      position: relative;
      min-height: 100px;
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      padding: 10px;
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);

      .checkbox {
        margin-right: 10px;
      }

      .image {
        margin-right: 10px;
        flex-shrink: 0;
      }

      .info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .name {
          font-size: 16px;
          font-weight: bold;
          margin-bottom: 4px;
        }

        .desc {
          font-size: 12px;
          color: #999;
          margin-bottom: 8px;
        }

        .bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .price {
            font-size: 16px;
            color: #c82519;
          }
        }
      }
    }
  }

  .cart-footer {
    background: #fff;
    border-top: 1px solid #eee;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;

    .total-price {
      font-size: 16px;
      span {
        color: #c82519;
      }
    }

    .checkout-button {
      width: 100px;
    }
  }
}

.delete-button {
  height: 100%;
}
</style>
